<template>
  <div class="container">
    <!-- 顶部搜索区域 -->
    <el-card>
      <el-row :gutter="30">
        <el-col :span="6">
          <div>货品编号</div>
          <el-input v-model="params.code" placeholder="请输入" />
        </el-col>
        <el-col :span="6">
          <div>货品名称</div>
          <el-input v-model="params.name" placeholder="请输入" />
        </el-col>
        <el-col :span="6">
          <div>货主名称</div>
          <el-input v-model="params.ownerName" placeholder="请输入" />
        </el-col>
        <el-col :span="6">
          <el-button type="primary" class="topBtn" @click="searchBtn">搜索</el-button>
          <el-button class="topBtn" @click="resetBtn">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 表格区域 -->
    <el-card>
      <el-row>
        <el-button style="background-color: #00be76;color: #fff">新增货品</el-button>
      </el-row>
      <!-- table表格区域 -->
      <el-table :data="tableData" border>
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="货品类型名称" prop="goodsTypeName" width="150" align="center" />
        <el-table-column label="货品编号" prop="code" width="150" align="center" />
        <el-table-column label="货品条码" prop="barCode" width="150" align="center" />
        <el-table-column label="货品名称" prop="name" width="150" align="center" />
        <el-table-column label="货主名称" prop="ownerName" width="150" align="center" />
        <el-table-column label="质检方式" prop="inspectionType" width="150" align="center">
          <template #default="scope">
            {{ inspectionTypeList[scope.row.inspectionType] }}
          </template>
        </el-table-column>
        <el-table-column label="温度要求" prop="temperatureType" width="150" align="center">
          <template #default="scope">
            {{ temperatureTypeList[scope.row.temperatureType] }}
          </template>
        </el-table-column>
        <el-table-column label="承重要求" prop="bearingType" width="150" align="center">
          <template #default="scope">
            {{ bearingTypeList[scope.row.bearingType] }}
          </template>
        </el-table-column>
        <el-table-column label="指定库区" prop="areaName" width="150" align="center" />
        <el-table-column label="体积" prop="volume" width="150" align="center" />
        <el-table-column label="价格" prop="price" width="150" align="center" />
        <el-table-column label="单位" prop="unit" width="150" align="center" />
        <el-table-column label="保质天数（天）" prop="guaranteeDay" width="150" align="center" />
        <el-table-column label="更新时间" prop="updateTime" width="150" align="center" />
        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template>
            <el-button type="text">编辑</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-row type="flex" justify="center">
        <el-pagination
          :current-page="params.current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { pageQueryDetailGoods } from '@/api'
export default {
  data() {
    return {
      // 参数
      params: {
        // 当前页
        current: 1,
        // 每页条数
        size: 10
      },
      // 总条数
      total: 0,
      // 表格数据
      tableData: [],
      // 质检方式
      inspectionTypeList: {
        'CJ': '抽检',
        'QJ': '全检',
        'BCL': '不处理'
      },
      // 温度要求
      temperatureTypeList: {
        'CW': '常温',
        'LC': '冷藏',
        'HW': '恒温'
      },
      // 承重要求
      bearingTypeList: {
        'ZX': '重型',
        'QX': '轻型',
        'BX': '中型'
      }
    }
  },
  created() {
    this.pageQueryDetailGoods()
  },
  methods: {
    async pageQueryDetailGoods() {
      const { data } = await pageQueryDetailGoods(this.params)
      console.log(data)
      this.tableData = data.records
      this.total = data.total
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.params.size = val
      this.pageQueryDetailGoods()
    },
    // 改变页数
    handleCurrentChange(val) {
      this.params.current = val
      this.pageQueryDetailGoods()
    },
    // 搜索
    searchBtn() {
      this.pageQueryDetailGoods()
    },
    // 重置
    resetBtn() {
      this.params = {
        current: 1,
        size: 10
      }
      this.pageQueryDetailGoods()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 25px;
}
.el-card {
  margin-bottom: 20px;
}
.el-row {
  margin-bottom: 15px;
}
.el-col div {
  font-size: 12px;
  color: #887e7e;
  padding-bottom: 10px;
}
.el-button {
  border-radius: 50px;
}
.topBtn {
  margin-top: 15px;
}
.topBtn:first-child {
  margin-left: 90px;
}
</style>
